import React ,{useContext}from 'react';
import classes from "./Counter.module.css"
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faPlus, faMinus} from '@fortawesome/free-solid-svg-icons'
import TestContext from"../../../store/testContext"

const Counter = (props) => {
    const Display = {
        display: props.amount > 0 ? "block" : "none"
    }

    const ctx = useContext(TestContext)
    const onAdd = ()=>{
        ctx.addMealHandler(props.data)
    }

    const onSub= ()=>{
        ctx.subMealHandler(props.data);
    }


    return (

        <div className={classes.counterContent}>
            <button className={classes.Sub} style={Display} onClick={onSub}>
                <FontAwesomeIcon icon={faMinus} ></FontAwesomeIcon>
            </button>
            <span className={classes.counter} style={Display}>{props.amount}</span>
            <button className={classes.Add} onClick={onAdd}>
                <FontAwesomeIcon icon={faPlus} ></FontAwesomeIcon>
            </button>
        </div>
    );
};

export default Counter;